<template>
  <ContentWrap>
    <el-card class="box-card !border-none" shadow="never">
      <el-form ref="searchFormRef" :model="tableData.searchParam" inline>
        <el-form-item label="业务类型">
          <el-select
            class="w-[280px]"
            v-model="tableData.searchParam.bizType"
            clearable
            placeholder="请选择业务类型"
          >
            <el-option label="全部" value="" />
            <el-option label="购买产品" value="buy_product" />
            <el-option label="购买团购套餐" value="buy_groupon_package" />
            <el-option label="购买会员" value="buy_vip" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            class="w-[280px]"
            v-model="tableData.searchParam.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option label="全部" value="" />
            <el-option label="待结算" value="0" />
            <el-option label="已结算" value="1" />
            <el-option label="已失效" value="2" />
            <el-option label="已取消" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="tableData.searchParam.createTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="mt-[5px]">
        <el-table :data="tableData.list" size="large" v-loading="tableData.loading">
          <template #empty>
            <span>{{ !tableData.loading ? '没有相关数据' : '' }}</span>
          </template>
          <el-table-column label="分佣用户" min-width="180" align="center">
            <template #default="{ row }">
              <div class="flex flex-col items-center justify-center">
                <img
                  class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
                  :src="row.user.avatar || '/avatar.png'"
                  alt=""
                />
                <span>{{ row.user.nickname || '匿名' }}</span>
                <span>{{ row.user.mobile || '未绑定手机号' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="基准金额" min-width="100">
            <template #default="{ row }">
              <el-tooltip :content="'关联单号：' + row.bizId">
                <span class="text-orange-500">¥{{ fenToYuan(row.basePrice) }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="分佣比例" min-width="100">
            <template #default="{ row }">
              <span>{{ row.bonusPercent }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="分佣金额" min-width="100">
            <template #default="{ row }">
              <span class="text-orange-500">¥{{ fenToYuan(row.bonusMoney) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="来源用户" min-width="150" show-overflow-tooltip align="center">
            <template #default="{ row }">
              <div class="flex flex-col items-center justify-center">
                <img
                  class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
                  :src="row.sourceUser.avatar || '/avatar.png'"
                  alt=""
                />
                <span>{{ row.sourceUser.nickname || '匿名' }}</span>
                <span>{{ row.sourceUser.mobile || '未绑定手机号' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="说明" min-width="220" align="left">
            <template #default="{ row }">
              <div class="multi-hidden">
                <span v-if="row.bonusLevel == 1">【一级分佣】</span>
                <span v-if="row.bonusLevel == 2">【二级分佣】</span>
                {{ row.note }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            min-width="170"
          />
          <el-table-column label="状态" min-width="100" align="center" fixed="right">
            <template #default="{ row }">
              <el-tooltip
                v-if="row.status == 1"
                :content="'已于' + formatTime(row.unfreezeTime) + '结算'"
              >
                <el-tag type="success">已结算</el-tag>
              </el-tooltip>
              <el-tooltip
                v-else-if="row.status == 2"
                :content="'已于' + formatTime(row.cancelTime) + '失效'"
              >
                <el-tag type="warning">已失效</el-tag>
              </el-tooltip>
              <el-tooltip
                v-else-if="row.status == 3"
                :content="'已于' + formatTime(row.cancelTime) + '取消'"
              >
                <el-tag type="warning">已取消</el-tag>
              </el-tooltip>
              <el-tag v-else type="primary">待结算</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          v-model:limit="tableData.searchParam.pageSize"
          v-model:page="tableData.searchParam.pageNo"
          :total="tableData.total"
          @pagination="loadTableData"
        />
      </div>
    </el-card>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { getPage } from '@/api/brokerage/record'
import { FormInstance } from 'element-plus'
import { fenToYuan, formatTime } from '@/utils'
import { dateFormatter } from '@/utils/formatTime'

defineOptions({ name: 'BrokerageRecord' })

const tableData = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    bizType: '',
    status: '',
    createTime: []
  }
})

const loadTableData = () => {
  tableData.loading = true
  getPage({
    ...tableData.searchParam
  })
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res.list
      tableData.total = res.total
    })
    .catch(() => {
      tableData.loading = false
    })
}

const searchFormRef = ref<FormInstance>()

/** 搜索按钮操作 */
const handleQuery = () => {
  tableData.searchParam.pageNo = 1
  loadTableData()
}

/** 重置按钮操作 */
const resetQuery = () => {
  searchFormRef.value?.resetFields()
  tableData.searchParam = {
    pageNo: 1,
    pageSize: 10,
    bizType: '',
    tradeNo: '',
    status: '',
    createTime: []
  }
  handleQuery()
}

/** 初始化 **/
onMounted(() => {
  handleQuery()
})
</script>
